<template>
	<view class="contanner">
		<!-- 头像区域 -->
		<view class="image_user">
			<view class="bg">
				<u-avatar class="i" src="https://www.nitutu.com/uploads/allimg/200628/1Z5203110-0.jpeg" size="200"
					mode="circle" show-level="true" level-icon="/static/person/VIP.png" evel-bg-color="#ffffff"
					@click="change_userimg"
					>
				</u-avatar>
				<label class="user_name">小乐子</label>
			</view>
		</view>
		<!-- 预约 -->
		<view class="mid_task">
			<view :class="weathersuc ?'show_tasks':'show_task'">
				<view class="title">
					我的预约
				</view>
				<view class="task_progress">
					<u-steps :list="numList" :current="0" active-color="#41b349" mode="number" v-if="isappointment">
					</u-steps>
					<view class="goto_appoint" v-if="isappointment==false">
						小可爱，你还没有预约哦
					</view>
					<view class="gto" v-if="isappointment==false">
						<view class="goto_img" @click="make_appoint">
							<image src="../../static/person/deliver.png"></image>
						</view>
					</view>
					<view class="tips_t" v-if="weathersuc==false">已经在询问老师的路上啦</view>
				</view>
				<view class="dev" v-if="weathersuc==true">
					<view class="des_appoint">
						<view class="tit_des">
							<view class="tit_text">
								<view class="tit_img">
									<image src="../../static/person/talke.png"></image>
								</view>
								<label>线上咨询</label>
							</view>
						</view>
						<view class="teacher">
							<view class="teacher_img">
								<image
									src="https://tse1-mm.cn.bing.net/th/id/R-C.52ef34b08a0bd6af430c0e4c291e503a?rik=nVtRSsjF63E9hw&riu=http%3a%2f%2fimg.duoziwang.com%2f2018%2f17%2f05241946706393.jpg&ehk=CNBIeCTeQ8aB2hvw0oBRn8LJyR%2bjJ8vxrhhtHvRTwzU%3d&risl=&pid=ImgRaw&r=0">
								</image>
							</view>
							<view class="call_t" @click="call_teacher">
								<image src="../../static/person/call.png"></image>
							</view>
						</view>
						<view class="teacher_name">
							<label class="text_t">赵静老师</label>
						</view>
						<view class="address">
							<view class="des_address">
								<view class="img_address">
									<view class="imag_icon">
										<image src="../../static/person/time.png"></image>
									</view>
										<view>咨询时间</view>
								</view>
								<view style="text-align: center; margin-top: 10rpx;">10月21日14：00——15:00</view>
							</view>
						</view>
						<view class="address">
							<view class="des_address">
								<view class="img_address">
									<view class="imag_icon">
										<image src="../../static/person/map.png"></image>
									</view>
										<view>咨询地点</view>
								</view>
								<view style="text-align: center;">QQ</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能区域 -->
		<function_list></function_list>
	</view>
</template>

<script>
	import function_list from '../person_list/person_list.vue'
	export default {
		name: 'person',
		data() {
			return {
				numList: [{ name: '线上预约' }, { name: '通知教师' }, { name: '预约完成' }, { name: '咨询完成' }, ],
				isappointment: true,
				weathersuc:true
			}
		},
		methods: {
			make_appoint() {
				uni.switchTab({ url: '../../pages/appointment/appointment' })
			},
			call_teacher(){
				console.log('给中心打电话')
			},
			change_userimg(){
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					success: res => {
						this.icon = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://localhost:8080//user/touxiang',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: res => {
								console.log(res)
								var obj = JSON.parse(res.data)
								console.log(obj.realPath)
								if (obj.message === '保存成功') {
									this.iconpath = obj.realPath
								}
							}
						})
					}
				})
			}
		},
		components:{ function_list }
	}
</script>

<style lang="less">
	* {
		margin: 0 auto;
		padding: 0;
	}

	.contanner {
		min-height: 100vh;
	}

	.mid_task {
		width: 750rpx;
		display: flex;
		justify-content: center;

		.show_task {
			width: 80%;
			height: 450rpx;
			border: 1px lightgray solid;
			position: relative;
			box-shadow: 0px 2px 10px 2px lightgray;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-top: -55rpx;
			overflow: hidden;

			.title {
				margin-top: 20rpx;
				text-align: center;
				font-size: 35rpx;
				font-family: "楷体";
			}

			.daily_sentence {
				display: flex;
				justify-content: center;
				align-items: center;

				.sentence {
					width: 90%;
					height: 100rpx;
					margin-top: 10rpx;
					text-align: justify;
					line-height: 50rpx;
					overflow: hidden;
				}
			}

			.task_progress {
				margin-top: 50rpx;
				.tips_t{
					text-align: center;
					margin-top: 50rpx;
				}
			}

			.goto_appoint {
				display: flex;
				justify-content: center;
			}

			.gto {
				display: flex;
				justify-content: center;
				margin-top: 60rpx;

				.goto_img {
					width: 70rpx;
					height: 70rpx;
					border: 1px solid lightgray;
					border-radius: 50%;

					box-shadow: 1px 1px 1px 1px lightgray;

					image {
						margin-top: 6rpx;
						width: 80%;
						height: 80%;
					}
				}
			}

		}

		.show_tasks {
			width: 80%;
			height: 910rpx;
			border: 1px lightgray solid;
			position: relative;
			box-shadow: 0px 2px 10px 2px lightgray;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-top: -55rpx;
			overflow: hidden;

			.title {
				margin-top: 20rpx;
				text-align: center;
				font-size: 35rpx;
				font-family: "楷体";

			}
			.task_progress {
				margin-top: 50rpx;
			}

			.dev {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 60rpx;

				.des_appoint {
					width: 500rpx;
					height: 510rpx;
					border: 1px pink solid;
					border-radius: 25rpx;
					box-shadow: 1px 5px 1px 1px lightgray;
					.address{
						margin-top: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.img_address{
							display: flex;
							justify-content: center;
							align-items: center;
							.imag_icon{
								width: 50rpx;
								height: 50rpx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
					}
					.teacher_name{
						text-align: center;
						margin-top: 6rpx;
						.text_t{
							border-bottom: 3px red solid;
							box-shadow: 0px 2px 0px 0px lightgray;
						}
					}
					.teacher{
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 24rpx;
						.call_t{
							position: absolute;
							margin-top: 110rpx;
							width: 70rpx;
							height: 70rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.teacher_img {
							width: 150rpx;
							height: 150rpx;
							border-radius: 50%;
							overflow: hidden;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
					.tit_des {
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: "楷体";
						font-size: 34rpx;

						.tit_text {
							width: 260rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-right: 1px lightgray solid;
							border-left: 1px lightgray solid;
							border-bottom: 2px lightgray solid;
							border-radius: 20px;
							box-shadow: 1px 3px 1px 1px lightgray;

							.tit_img {
								width: 65rpx;
								height: 65rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	.bg {
		width: 750rpx;
		height: 350rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #eea2a4;
		border-radius: 0 0 0 75%;

		.i {
			margin-top: -150rpx;
			position: absolute;
		}

		.user_name {
			font-size: 30rpx;
			color: white;
			font-family: "楷体";
			margin-top: 130rpx;
			position: absolute;
		}
	}
</style>
